<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动详情 - 志愿服务管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        :root {
            --primary-color: #2196F3;
            --primary-dark: #1976D2;
            --primary-light: #BBDEFB;
            --success-color: #4CAF50;
            --warning-color: #FFC107;
            --danger-color: #F44336;
            --text-primary: #212121;
            --text-secondary: #757575;
            --background-light: #F5F5F5;
            --background-white: #FFFFFF;
            --border-color: #E0E0E0;
        }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
            min-height: 100vh;
            margin: 0;
            padding: 2rem;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            background-color: var(--background-white);
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }

        .activity-header {
            text-align: center;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .activity-header h1 {
            color: var(--primary-color);
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .activity-status {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 500;
            margin-top: 1rem;
        }

        .status-not-started {
            background-color: var(--primary-light);
            color: var(--primary-dark);
        }

        .status-in-progress {
            background-color: #E8F5E9;
            color: var(--success-color);
        }

        .status-ended {
            background-color: #FFEBEE;
            color: var(--danger-color);
        }

        .activity-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .info-card {
            background: var(--background-light);
            padding: 1.5rem;
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .info-card:hover {
            transform: translateY(-5px);
        }

        .info-card h3 {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .info-card p {
            color: var(--text-primary);
            font-size: 1.1rem;
            margin: 0;
            font-weight: 500;
        }

        .countdown-section {
            background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 1.5rem;
            border-radius: 12px;
            margin-bottom: 2rem;
            text-align: center;
        }

        .countdown-title {
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }

        .countdown-timer {
            font-size: 2rem;
            font-weight: bold;
        }

        .activity-description {
            background: var(--background-light);
            padding: 1.5rem;
            border-radius: 12px;
            margin-bottom: 2rem;
        }

        .activity-description h2 {
            color: var(--primary-color);
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .btn-enroll {
            width: 100%;
            padding: 1rem;
            font-size: 1.2rem;
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .btn-enroll:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .btn-enroll:disabled {
            background-color: var(--text-secondary);
            border-color: var(--text-secondary);
        }

        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .container {
                padding: 1rem;
            }

            .activity-info {
                grid-template-columns: 1fr;
            }
        }

        .admin-actions {
            margin: 2rem 0;
        }

        .admin-actions .btn {
            padding: 1rem;
            font-size: 1.2rem;
            border-radius: 12px;
            transition: all 0.3s ease;
            background: var(--success-color);
            border-color: var(--success-color);
        }

        .admin-actions .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
            background: #43A047;
            border-color: #43A047;
        }

        .admin-actions .btn i {
            margin-right: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="activity-header">
            <h1 th:text="${activity.activityName}">活动详情</h1>
            <div class="activity-status" 
                 th:classappend="${activity.activityState == 0 ? 'status-not-started' : (activity.activityState == 1 ? 'status-in-progress' : 'status-ended')}">
                <span th:text="${activity.activityState == 0 ? '未开始' : (activity.activityState == 1 ? '进行中' : '已结束')}">活动状态</span>
            </div>
        </div>

        <div class="activity-info">
            <div class="info-card">
                <h3><i class="fas fa-calendar"></i>开始时间</h3>
                <p th:text="${#dates.format(activity.startTime, 'yyyy-MM-dd HH:mm')}">开始时间</p>
            </div>
            <div class="info-card">
                <h3><i class="fas fa-clock"></i>持续时间</h3>
                <p><span th:text="${activity.sustain}"></span> 小时</p>
            </div>
            <div class="info-card">
                <h3><i class="fas fa-users"></i>参与人数</h3>
                <p><span th:text="${activity.number}"></span> 人</p>
            </div>
            <div class="info-card">
                <h3><i class="fas fa-flag"></i>报名状态</h3>
                <p th:text="${activity.enlistsState == 0 ? '未开始' : (activity.enlistsState == 1 ? '报名中' : '已结束')}">报名状态</p>
            </div>
        </div>

        <div class="countdown-section" th:if="${activity.activityState == 0 || activity.enlistsState == 0}">
            <div th:if="${activity.activityState == 0}">
                <div class="countdown-title">距离活动开始还有</div>
                <div class="countdown-timer">
                    <input type="hidden" id="remainStartSeconds" th:value="${remainStartSeconds}"/>
                    <span id="activityCount" th:text="${remainStartSeconds}"></span> 秒
                </div>
            </div>
            <div th:if="${activity.enlistsState == 0}">
                <div class="countdown-title">距离报名开始还有</div>
                <div class="countdown-timer">
                    <input type="hidden" id="remainEnlistsSeconds" th:value="${remainEnlistsSeconds}"/>
                    <span id="enlistsCount" th:text="${remainEnlistsSeconds}"></span> 秒
                </div>
            </div>
        </div>

        <div class="activity-description">
            <h2><i class="fas fa-info-circle me-2"></i>活动介绍</h2>
            <p th:text="${activity.introduce}">活动介绍内容</p>
        </div>

        <div class="enrollment-info">
            <div class="info-card">
                <h3><i class="fas fa-calendar-check"></i>报名时间</h3>
                <p>
                    开始：<span th:text="${#dates.format(activity.enlistsStart, 'yyyy-MM-dd HH:mm')}"></span><br>
                    结束：<span th:text="${#dates.format(activity.enlistsEnd, 'yyyy-MM-dd HH:mm')}"></span>
                </p>
            </div>
        </div>

        <div class="admin-actions mb-4" th:if="${admin != null && activity.activityState == 1}">
            <a th:href="@{'/toAddSignPage/' + ${activity.id}}" class="btn btn-success btn-lg w-100">
                <i class="fas fa-clipboard-check me-2"></i>发起签到
            </a>
        </div>

        <form id="secKillForm" method="post" th:action="@{/doSeckill}" class="mt-4">
            <input type="hidden" id="activityId" name="activityId" th:value="${activity.id}">
            <input type="hidden" id="enlistsState" th:value="${activity.enlistsState}">
            <button class="btn btn-primary btn-enroll" type="submit" id="buyButton" th:disabled="${activity.enlistsState != 1}">
                <i class="fas fa-user-plus me-2"></i>立即报名
            </button>
        </form>
    </div>

    <script>
        $(function() {
            activityCount();
            enlistsCount();
            updateButtonState();
        });

        function updateButtonState() {
            var enlistsState = parseInt($("#enlistsState").val());
            var button = $("#buyButton");
            
            if (enlistsState === 1) {
                button.prop("disabled", false);
                button.removeClass("btn-secondary").addClass("btn-primary");
            } else {
                button.prop("disabled", true);
                button.removeClass("btn-primary").addClass("btn-secondary");
            }
        }

        function activityCount() {
            var remainStartSeconds = $("#remainStartSeconds").val();
            var timeout;
            
            if (remainStartSeconds > 0) {
                timeout = setTimeout(function() {
                    $("#activityCount").text(remainStartSeconds - 1);
                    $("#remainStartSeconds").val(remainStartSeconds - 1);
                    activityCount();
                }, 1000);
            } else if (remainStartSeconds == 0) {
                if (timeout) {
                    clearTimeout(timeout);
                }
                $(".countdown-section").fadeOut();
                updateButtonState();
            }
        }

        function enlistsCount() {
            var remainEnlistsSeconds = $("#remainEnlistsSeconds").val();
            var timeout;
            
            if (remainEnlistsSeconds > 0) {
                timeout = setTimeout(function() {
                    $("#enlistsCount").text(remainEnlistsSeconds - 1);
                    $("#remainEnlistsSeconds").val(remainEnlistsSeconds - 1);
                    enlistsCount();
                }, 1000);
            } else if (remainEnlistsSeconds == 0) {
                if (timeout) {
                    clearTimeout(timeout);
                }
                $(".countdown-section").fadeOut();
                updateButtonState();
            }
        }
    </script>
</body>
</html>